<template>
  <view class="flex-area">
    <view
      v-for="link in visibleLinks"
      :key="link.name"
      class="flex-link"
      hover-class="hovering"
      :class="{ disabled: link.disabled, 'plain-disabled': link.plainDisabled }"
    >
      <TrackButton
        :track-id="link.trackCode ? link.trackCode : link.name"
        :type="TrackType.ApplianceDetail"
        @tap.stop="onLinkClick(link)"
      >
        <view class="flex-link-inner">
          <image class="icon" :src="link.icon"></image>
          <text class="text">{{ link.name }}</text>
        </view>
      </TrackButton>
    </view>

    <view v-if="isLinkOverflowed" class="flex-more">
      <view class="more-list" :class="moreDropdownVisible ? 'show' : ''">
        <TrackButton
          v-for="link in moreFlexLinks"
          :key="link.name"
          :track-id="link.trackCode"
          :type="TrackType.ApplianceDetail"
          @tap.stop="onLinkClick(link)"
        >
          <view
            class="more-item"
            hover-class="hovering"
            :class="{ disabled: link.disabled, 'plain-disabled': link.plainDisabled }"
          >
            <image class="icon" :src="link.icon"></image>
            <text class="text">{{ link.name }}</text>
          </view>
        </TrackButton>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import TrackButton from '@/dataReport/components/TrackButton.vue'
import { TrackType } from '@/dataReport/tracks'

export type FlexAreaLink = {
  icon: string
  name: string
  disabled?: boolean
  plainDisabled?: boolean
  ignoreTrigger?: boolean
  role?: string // 预留给特殊按钮使用
  onClick?: (link: FlexAreaLink) => unknown
  trackCode: string
  trackData?: Record<string, any>
}
const props = withDefaults(
  defineProps<{
    links: FlexAreaLink[]
    maxSize: number
  }>(),
  {
    maxSize: 3,
  }
)
const emit = defineEmits<{
  (e: 'item-click', link: FlexAreaLink): void
}>()
defineExpose({
  closeMoreDropdown,
})

/**
 * 可见按钮
 */
const isLinkOverflowed = computed(() => {
  return props.links.length > props.maxSize
})
const visibleLinks = computed(() => {
  if (!isLinkOverflowed.value) return props.links

  const maxIndex = Math.max(0, props.maxSize - 1)
  return props.links.slice(0, maxIndex).concat(moreLink)
})

/**
 * 更多功能
 */
const moreLink: FlexAreaLink = {
  icon: '/pages/appliance/static/FlexAreaMore.png',
  name: '更多功能',
  ignoreTrigger: true,
  role: 'more',
  trackCode: '',
}
const moreFlexLinks = computed(() => {
  const minIndex = Math.max(0, props.maxSize - 1)
  return props.links.slice(minIndex)
})
const moreDropdownVisible = ref(false)
function toggleMoreDropdownVisible() {
  moreDropdownVisible.value = !moreDropdownVisible.value
}
function closeMoreDropdown() {
  moreDropdownVisible.value = false
}

/**
 * 点击事件
 */
function onLinkClick(link: FlexAreaLink) {
  link.onClick?.(link)

  if (link.role === 'more') {
    toggleMoreDropdownVisible()
  } else {
    closeMoreDropdown()
  }

  if (!link.ignoreTrigger) {
    emit('item-click', link)
  }
}
</script>

<style scoped lang="less">
.flex-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 32rpx;
  margin-right: 32rpx;
  margin-bottom: 10rpx;
  padding: 0 4rpx;
  position: relative;
  background-color: #f4f4f6;
}

.flex-link {
  flex: 1;
  position: relative;
  & + .flex-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 2rpx;
    height: 40rpx;
    transform: translateY(-50%);
    background-color: rgba(var(--dark-vector), 0.2);
  }
  &.hovering {
    opacity: 0.8;
  }
}
.flex-link-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 88rpx;
}
.icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 16rpx;
}
.plain-disabled,
.disabled {
  filter: opacity(0.6);
}
.disabled {
  pointer-events: none;
}
.text {
  font-weight: 500;
  font-size: 28rpx;
  line-height: 40rpx;
  color: var(--dark-color);
}
.flex-more {
  .more-list {
    position: absolute;
    top: 120%;
    right: 32rpx;
    min-width: 208rpx;
    background-color: #ffffff;
    padding: 6rpx 0;
    box-sizing: border-box;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
    &::before {
      content: '';
      position: absolute;
      right: 25%;
      display: block;
      border-style: solid;
      border-color: transparent;
      border-width: 0 12rpx 16rpx 12rpx;
      border-bottom-color: #ffffff;
      transform: translate(50%, -100%);
    }
    &.show {
      animation: showDropdown 0.3s forwards;
    }
    &.hide {
      animation: hideDropdown 0.3s forwards;
    }
  }
  .more-item {
    display: flex;
    align-items: center;
    padding: 18rpx 16rpx;
    background-color: #ffffff;
    &.hovering {
      filter: brightness(0.95);
    }
    .icon {
      flex-shrink: 0;
    }
    .text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
@keyframes showDropdown {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
@keyframes hideDropdown {
  0% {
    visibility: visible;
    opacity: 1;
  }
  100% {
    visibility: hidden;
    opacity: 0;
  }
}
</style>
